<template>
  <div>
    <el-container style="height: 100vh">
      <!-- 侧边栏容器 -->
      <el-aside class="aside" :style="{ width: `${isCollapse ? 64 : 208}px`, transition: '0.4s' }">
        <el-menu text-color="#A8B0B6" @select="selectActive" :style="{ minHeight: '100vh', backgroundColor: '#345' }"
          @open="handleOpen" mode="vertical" :collapse="isCollapse" :unique-opened="true" :default-active="myPath"
          class="el-menu-vertical-demo">
          <el-menu-item class="logoMeunItem">
            <img class="logo" :style="{
              width: `${isCollapse ? 44 : 93}px`,
              height: `${isCollapse ? 18 : 38}px`,
            }" src="../assets/img/logo@2x.png" alt="" />
          </el-menu-item>
          <el-menu-item index="/home/index" @click="goToNav('/home/index')">
            <i class="iconfont icon-shujujianguan"></i>
            <span slot="title" class="title">概况</span>
          </el-menu-item>
          <template v-if="moodRouter.length > 0">
            <div v-for="item in moodRouter" :key="item.meta.title">
              <el-submenu :index="item.meta.title" v-if="item.alwaysShow">
                <template slot="title">
                  <i :class="'iconfont' + ' ' + item.meta.icon + ' ' + 'CommonStyle'"></i>
                  <span slot="title" class="title">{{ item.meta.title }}</span>
                </template>
                <div v-for="meth in item.children" :key="meth.name">
                  <el-menu-item :index="meth.component" v-if="meth.meta.title != '提现申请'" @click="gotoUrl(meth)">
                    <span slot="title" class="subTitle">{{ meth.meta.title }}</span>
                  </el-menu-item>
                </div>
              </el-submenu>
              <el-menu-item v-else :index="item.component" @click="gotoUrl(item)">
                <i class="iconfont icon-shujujianguan"></i>
                <span slot="title" class="title">{{ item.meta.title }}</span>
              </el-menu-item>
            </div>
          </template>
          <!-- <el-menu-item index="/board"
            @click="$router.push('/board')">
            <i class="iconfont icon-shujujianguan"></i>
            <span slot="title" class="subTitle">数据看板</span>
          </el-menu-item>
          <el-menu-item index="/BasicSettings/accountCreatAndBind"
            @click="$router.push('/BasicSettings/accountCreatAndBind')">
            <i class="iconfont icon-shujujianguan"></i>
            <span slot="title" class="subTitle">账户创建与绑定</span>
          </el-menu-item> -->
          <!-- <el-menu-item index="/BasicSettings/Settings" @click="$router.push('/BasicSettings/Settings')">
            <span slot="title" class="subTitle">设置</span>
          </el-menu-item> -->



        </el-menu>
      </el-aside>

      <el-container>
        <!-- 顶栏容器 -->
        <el-header class="header" style="height: 64px">
          <!-- 展开和收起菜单 -->
          <div style="margin-right: 36px">
            <i v-show="!isCollapse" class="iconfont icon-zhankaishouqicaidan" @click="isCollapse = true"
              style="font-size: 19px; cursor: pointer"></i>
            <i v-show="isCollapse" class="iconfont icon-shouqishouqicaidan-copy" @click="isCollapse = false"
              style="font-size: 19px; cursor: pointer"></i>
          </div>
          <div class="control">
            <div class="control_item after" @click="quitLogin()">
              <i class="iconfont icon-tuichu" style="margin-right: 6px"></i>
              <div>退出</div>
            </div>
            <div class="control_item after" @click="goToMessage">
              <div class="iconBox">
                <div class="iconfont icon-bell"></div>
                <div v-if="$store.state.isNewMessage" class="badge"></div>
              </div>

              <div>消息</div>
            </div>
            <div class="control_item">
              <el-image class="headPic" :src="avatar ? avatar : require('../assets/img/headPic.png')"
                :preview-src-list="[avatar || require('../assets/img/headPic.png')]" style="margin-right: 11px">
              </el-image>
              <div @click="goToPersonalSettings">{{
                nickName }}
              </div>
            </div>
          </div>
        </el-header>
        <!-- 主要区域容器 -->
        <!-- overflow-x: scroll//暂时不加  加了有滚动轴的高度,要重新调所有页面的高度 保证刚好显示一屏   -->
        <el-main style="background-color: #f5f5f5; padding: 16px;min-width: 940px;">
          <!-- 二级路由所需要显示的内容 -->
          <!-- 见views/index/index.vue -->

          <keep-alive :max="1">
            <router-view v-if="$route.meta.keepAlive" />
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive" />

          <!-- <keep-alive>
            <router-view   />
          </keep-alive> -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import httpApi from "@/http";
import store from "@/store";
export default {
  data() {
    return {
      myPath: JSON.parse(sessionStorage.getItem("NavStyleState")) || '/home/index',
      isCollapse: false,
      select: "2",
      search: "",
      nickName: "",
      avatar: "",
      routerMood: [],
      isNewMessage: false,

      moodRouter: []
    };
  },
  created() {
    this.routerMood = this.$router.options.routes;
    // console.log(this.routerMood);
  },
  methods: {
    goToMessage() {
      if (this.$route.path != '/messageCenter/messageCenterList') {
        this.$router.push('/messageCenter/messageCenterList')
      }
    },

    goToPersonalSettings() {
      if (this.$route.path != '/BasicSettings/personalSettings') {
        this.$router.push('/BasicSettings/personalSettings')
      }
    },
    goToNav(url) {

      if (url == this.$route.path) {//避免到重复的路由
        return
      }
      this.$router.push(url)
    },

    async gotoUrl(e) {
      let res = await this.$http.loginApi.getRoutersbutton({ component: e.component })
      sessionStorage.setItem('permissions', JSON.stringify(res.data.data))
      if (e.component == this.$route.path) {//避免到重复的路由
        return
      }
      if (e.component == '车辆安全管理') {
        this.gotoSafety()
      } else if (e.component == '车辆资产管理') {
        window.open('https://mrk.cacxtravel.com', '_blank')
      } else {
        this.$router.push(e.component)
      }
    },
    gotoSafety() {
      // mva-cakc.lunz.cn
      window.open('https://mva-cakc.lunz.cn', '_blank')
    },
    quitLogin() {
      this.$confirm("此操作将退出账号, 是否继续?", "退出", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          httpApi.loginApi.refreshToken({}).then(res1 => {
            this.$store.commit("deleteToken");
            this.$router.push("/login");
            sessionStorage.removeItem('NavStyleState')
            this.$message({
              type: "success",
              message: "已退出账号!",
            });
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    getUserInfo() {
      httpApi.loginApi.getUserInfo().then((res) => {
        // console.log(res.data.data);
        this.nickName = res.data.data.nickName;
        this.avatar = res.data.data.avatar;
        // console.log(this.nickName);
        this.$store.commit("saveUserInfo", {
          nickName: res.data.data.nickName,
          avatar: res.data.data.avatar,
          phoneNumber: res.data.data.phoneNumber,
          email: res.data.data.email,
          userName: res.data.data.userName,

        });

      });
    },
    handleOpen(key, keyPath) {
      // console.log("open", key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    selectActive(val) {
      // console.log("选择", val);
      // this.myPath = val

    },
    getMessage() {
      let params = {
        port_type: "coreplatform"
      }
      httpApi.loginApi.getMessageNotice(params).then(res => {
        if (res.data.code == 200) {
          this.noticData = res.data.data
          this.noticData.forEach(item => {
            if (item.read == 0) {//有未读消息
              //this.isNewMessage = true
              this.$store.state.isNewMessage = true
              return
            }

          })
        }
      })
    },
    async cread() {
      this.moodRouter = []
      let res = await this.$http.loginApi.getRouters()
      this.moodRouter = JSON.parse(JSON.stringify(res.data.data))
      this.moodRouter.shift()
      // this.moodRouter.push({meta:{title:'统计管理',icon:"icon-sijiguanli"},alwaysShow:true,
      // children:[
      //   {component: '/dataStatistics/undrawns', meta: { title: '未提现数据统计' }},
      //   {component: '/dataStatistics/Cargostatistics', meta: { title: '货物数据统计' }},
      //   {component: '/dataStatistics/Coststatistics', meta: { title: '费用统计' }},
      //   {component: '/dataStatistics/dirver', meta: { title: '司机费用统计' }},
      //   {component: '/dataStatistics/brokerage', meta: { title: '佣金统计' }}
      // ]}

      // )
      this.moodRouter.forEach((item, i) => {
        if (item.children[0].meta.title == '数据概览') {
          item.meta = {
            icon: item.children[0].meta.icon,
            title: item.children[0].meta.title,
          }
          item.component = item.children[0].component
          item.alwaysShow = false
          item.children = []
        }

        if (item.meta.title == '车辆管理') {
          item.children.push({ component: '车辆安全管理', meta: { title: '车辆安全管理' } }, { component: '车辆资产管理', meta: { title: '车辆资产管理' } })
        }
        if (item.meta.title == '司机管理') {
          item.children.push({ component: '/map/driverMap', meta: { title: '司机聚合地图' } })
        }
        // if (item.meta.title == '基础设置') {
        //   item.children.push({ component: '/BasicSettings/insure', meta: { title: '保险管理' } })
        // }
      })
      this.moodRouter = JSON.parse(JSON.stringify(this.moodRouter))
      console.log(this.moodRouter)
      // this.moodRouter.pop()
    }

  },
  created() {
    this.getUserInfo();

  },
  mounted() {
    this.activeIndex = window.location.href.split('#')[1];
    this.cread()
    this.getMessage()

  },
  watch: {
    $route: function (to, from) {	//监视$route的变化
      //设置导航菜单高亮的路径
      console.log('路由路径', this.$route.meta.thumb[0].to);
      this.myPath = this.$route.meta.thumb[0].to;

      // 只当页面刷新的时候   更新会话缓存 路径值
      window.addEventListener("beforeunload", () => {
        sessionStorage.setItem("NavStyleState", JSON.stringify(this.myPath))
      })


    }
  },
};
</script>

<style lang="scss" scoped>
.el-submenu ::v-deep .el-submenu__title:hover {
  color: #ffffff !important;
  background: linear-gradient(270deg,
      hsl(209, 34%, 50%) 0%,
      hsl(210, 25%, 27%) 100%) !important;

  .CommonStyle {
    color: #fff;
  }
}



::v-deep .el-menu .el-menu-item:hover {
  outline: 0 !important;

  background: linear-gradient(270deg, #ecf5fe 0%, #1890ff 100%) !important;
  border-radius: 4px;

  .subTitle {
    color: #ffffff !important;
  }

  .title {
    color: #ffffff
  }

  .icon-shujujianguan {
    color: #ffffff
  }
}

// ::v-deep .el-menu .el-menu-item.is-active {
//     color: #2E95FB !important;
//     background: linear-gradient(270deg, #000 0%, #FEFEFE 100%)!important;
// }
// 下拉展开区域背景颜色
.el-submenu ::v-deep .el-menu {
  background-color: #000c17;
}

// / 导航二级菜单栏点击之后的一像素边的问题 /
.el-menu {
  border-right: none;
}


.el-submenu .el-menu {
  background: linear-gradient(270deg, #000 0%, #000 100%) !important;
}

.aside {
  .el-menu-vertical-demo {
    .el-menu-item {
      height: 48px;
      line-height: 48px;
    }

    // 子选项区域背景颜色

    // 菜单选项激活样式

    // logo处不变颜色

    .el-menu-item.is-active {
      background-color: #1890ff !important;
      //width: 192px;
      border-radius: 4px;

      // margin: 0 auto;
      &.logoMeunItem.is-active {
        background-color: #345 !important;
      }

      >span {
        color: #ffffff !important;
      }

      .iconfont {
        color: #ffffff;
      }
    }

    .el-submenu is-opened {
      background-color: #000c17;
    }

    .title {
      font-size: 12px;
      margin-left: 10px;
    }

    .subTitle {
      margin-left: 10px;
      font-size: 12px;
      color: #a1a9af;
    }
  }
}

.header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  min-width: 880px;

  .input-with-select {
    height: 36px;
    width: 280px;

    ::v-deep .el-input__inner {
      height: 36px;
    }

    .selectBox {
      width: 90px;
      height: 36px;
    }
  }

  .control {
    display: flex;
    margin-left: auto;

    .control_item {
      display: flex;
      align-items: center;
      cursor: pointer;

      .iconBox {
        margin-right: 8px;
        position: relative;

        .icon-bell {
          color: #181818;
          font-size: 16px;
        }

        .badge {
          position: absolute;
          height: 8px;
          width: 8px;
          top: -1px;
          right: -1px;
          border-radius: 50%;
          background-color: #F5222D;
        }

      }

      .headPic {
        height: 32px;
        width: 32px;
        border-radius: 50%;
      }

      &.after::after {
        content: "";
        width: 1px;
        height: 20px;
        background: #d9d9d9;
        margin: 0 25px;
      }
    }
  }
}

.aside::-webkit-scrollbar {
  display: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 208px;
  min-height: 400px;
}

.logoMeunItem {
  height: 116px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  .logo {
    width: 93px;
    height: 38px;
  }
}
</style>
